<template>
  <!-- 代理查询 -->
  <div class="app-container">
    <div class="app-wrap">
      <div class="flexStartDetween marginB20">
        <div class="infoBox width25 card-panel_one">
          <p>新增代理</p>
          <div style="text-align: right;margin-top:-36px"><span class="numberText">{{ formParams.agent_num }}</span>人</div>
          <p class="infoText">
            人数：<span class="numberText">{{ formParams.agent_first_recharge_num }}</span>人
            <span class="marginR10"></span>  
            金额：₹<span class="numberText">{{ formParams.agent_agent_recharge_money }}</span>
          </p>
        </div>
        <div class="infoBox width25 card-panel_two"  style="padding:18px">
          <div class="numberBox">
            <span>首次充值人数</span> 
            <span><span class="numberText">{{ formParams.agent_first_recharge_num }}</span>人</span>
          </div>
          <div class="numberBox" style="margin-top:30px">
            <span>首次充值金额</span> 
            <span>₹<span class="numberText">{{ formParams.agent_first_recharge_money }}</span></span>
          </div>
        </div>
        <div class="infoBox width25 card-panel_three" style="padding:18px">
          <div class="numberBox">
            <span>二次充值人数</span> 
            <span><span class="numberText">{{ formParams.agent_second_recharge_num }}</span>人</span>
          </div>
          <div class="numberBox" style="margin-top:30px">
            <span>二次充值金额</span> 
            <span>₹<span class="numberText">{{ formParams.agent_second_recharge_money }}</span></span>
          </div>
        </div>
        <div class="infoBox width25 card-panel_four" style="padding:18px">
          <div class="numberBox">
            <span>三次充值人数</span> 
            <span><span class="numberText">{{ formParams.agent_three_recharge_num }}</span>人</span>
          </div>
          <div class="numberBox" style="margin-top:30px">
            <span>三次充值金额</span> 
            <span>₹<span class="numberText">{{ formParams.agent_three_recharge_money }}</span></span>
          </div>
        </div>
      </div>
      <search-table ref="table" :table-loading="listLoading" :table-data="dataList" @query="getDataList(true)" @reset="refresh"  style="height:70vh">
        <template v-slot:row>
          <el-form-item class="marginR20">
            <el-select v-model="listQuery.filter_user_type" filterable placeholder="请选择查询类型">
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in conditionData" :key="index"></el-option>
            </el-select>
            <el-input type="text" class="width200" v-model="listQuery.filter_value" clearable placeholder="请输入数值"/>
          </el-form-item>
          <el-form-item label="日期时间:" label-width="80px">
            <el-date-picker is-range v-model="listQuery.dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" 
            end-placeholder="结束日期" class="full-width-input time-box" :default-time="['00:00:00', '23:59:59']" :clearable="false"></el-date-picker>
          </el-form-item>
          <el-form-item label="代理时间:" label-width="80px">
            <el-date-picker is-range v-model="listQuery.agentTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" 
            end-placeholder="结束日期" class="full-width-input time-box" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
          </el-form-item>
          <el-form-item label="渠道:" label-width="50px">
            <el-select v-model="listQuery.agent_id" placeholder="请选择渠道" filterable >
              <el-option label="全部" value=""></el-option>
              <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getDataList">刷新</el-button>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getProxyList">刷新汇总</el-button>
        </template>
        <template>
          <el-table-column align="center" prop="id" label="用户ID" width="120"/>
          <el-table-column align="center" prop="share_url" label="分享链接" width="120">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" :disabled="!scope.row.share_url" @click.stop="shareUrl(scope.row)">分享链接</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="nick_name" label="用户昵称" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="item_details" @click="handleCurrentChange(scope.row,'nick_name')"> {{ scope.row.nick_name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="agent_id" label="渠道名" align="center" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
             <span v-show="scope.row.agent_id">【{{scope.row.agent_id}}】{{ $public.channelLabel(scope.row.agent_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="parent_id" label="上级ID" width="90"/>
          <el-table-column align="center" prop="all_son_num" label="代理总人数" width="100">
            <template slot-scope="scope">
              <span class="item_details" @click="handleCurrentChange(scope.row,'all_son_num')"> {{ scope.row.all_son_num }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="amount" label="历史充值(当日充值)"  width="150">
            <template slot-scope="scope">
              {{ scope.row.history_recharge }}({{ scope.row.today_recharge }})
            </template>
          </el-table-column>
          <el-table-column align="center" prop="history_commission" label="历史佣金"  width="150"/>
          <el-table-column align="center" prop="today_get_commission" label="当日领取佣金"  width="150"/>
          <el-table-column align="center" prop="today_no_get_commission" label="未领取佣金"  width="150"/>
          <el-table-column align="center" prop="mobile" label="手机号"  width="150"/>
          <el-table-column align="center" prop="reg_ip" label="注册IP"  width="150"/>
          <el-table-column align="center" prop="login_ip" label="登录IP"  width="150"/>
          <el-table-column align="center" prop="created_at" label="注册时间"  width="180"/>
          <el-table-column align="center" prop="login_time" label="最后登录时间"  width="180"/>
          <el-table-column prop="reg_machine" label="注册设备" align="center" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-show="scope.row.reg_machine" class="item_details" @click="checkedItem = scope.row,isShowMobileDetails = true">{{ scope.row.reg_machine }}</span>
              <span v-show="!scope.row.reg_machine">--</span>
            </template>
          </el-table-column>
          <el-table-column prop="login_machine" label="登陆设备" align="center" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-show="scope.row.login_machine" class="item_details" @click="checkedItem = scope.row,isShowMobileDetails = true">{{ scope.row.login_machine }}</span>
              <span v-show="!scope.row.login_machine">--</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="all_son_num" label="新增代理"  width="150"/>
          <el-table-column align="center" prop="recharge_total" label="个人总充值"  width="150"/>
          <el-table-column align="center" prop="withdrawal_total" label="个人总提现"  width="150"/>
          <el-table-column align="center" prop="agent_total_pay_money" label="代理总充值"  width="150"/>
          <el-table-column align="center" prop="agent_total_cash_money" label="代理总提现"  width="150"/>
          <el-table-column align="center" prop="a_agency" label="A级代理(人数/返佣/下注)"  width="180">
            <template slot-scope="scope">
              {{ scope.row.one_agent_person }}/{{ scope.row.one_agent_commission }}/{{ scope.row.one_agent_water }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="b_agency" label="B级代理(人数/返佣/下注)"  width="180">
            <template slot-scope="scope">
              {{ scope.row.two_agent_person }}/{{ scope.row.two_agent_commission }}/{{ scope.row.two_agent_water }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="c_agency" label="C级代理(人数/返佣/下注)"  width="180">
            <template slot-scope="scope">
              {{ scope.row.three_agent_person }}/{{ scope.row.three_agent_commission }}/{{ scope.row.three_agent_water }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="is_arrived_hall" label="是否到达大厅"  width="150">
            <template slot-scope="scope">
              <el-tag :type="scope.row.is_arrived_hall==1?'success':'info'">{{ scope.row.is_arrived_hall==1?'到达':'未到达'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="last_action" label="最后一步操作"  width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ pointLabel(scope.row.last_action) }}</span>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getDataList" />
        </template>
      </search-table>
      <page-details title="代理详情" :show="isShowDetails" :data="checkedItem" @onHideDetails="onHideDetails"/>
      <mobile-details :show="isShowMobileDetails" :data="checkedItem" @onHideDetails="onHideDetails" />
      <subagent title="子集代理" :show="isShowSubDetails" :data="checkedItem" @onHideDetails="onHideDetails"/>
    </div>
  </div>
</template>

<script>
import { throttle } from "@/utils/index";
import { 
  getAgent,
  getProxy
 } from "@/api/agent";
import { 
  POINT_TYPE
 } from "@/utils/enum";
import PageDetails from '@/views/userManage/user/page-details.vue'
import MobileDetails from '@/views/userManage/user/mobile-details'
import Subagent from './subagent.vue'
import SearchTable from "@/components/SearchTable";
export default {
  name: "agent",
  components: {
    PageDetails,
    MobileDetails,
    Subagent,
    SearchTable,
  },
  data () {
    return {
      POINT_TYPE,
      dataList: [],
      channelData:this.$store.state.commonState.channelDataArray,
      conditionData:[
        {label:'用户ID',value:1},
        {label:'昵称',value:2},
        {label:'手机号',value:3},
        {label:'邮箱',value:4},
        {label:'上级ID',value:5},
      ],
      checkedItem: null,
      listLoading: false,
      isShowMobileDetails: false,
      isShowDetails: false,
      isShowSubDetails: false,
      currentTotal: 0,
      listQuery: {
        page: 1,
        size: 50,
        filter_user_type:1,
        filter_value:'',
        agent_id:'',
        dateTime: [this.$public.getDateWeek('s',0)+' 00:00:00',this.$public.getDateWeek('e',0)+' 23:59:59'],
        start_time: '',
        end_time: '',
        agentTime: [],
        agent_time_start: '',
        agent_time_end: '',
        is_agent: 1,
      },
      formParams:{
        agent_num: 0, //代理人数
        agent_agent_recharge_money: 0, //代理充值金额
        agent_first_recharge_num: 0, //代理首充人数
        agent_first_recharge_money: 0, //代理首充金额
        agent_second_recharge_num: 0, //代理二充人数
        agent_second_recharge_money: 0, //代理二充金额
        agent_three_recharge_num: 0, //代理三充人数
        agent_three_recharge_money: 0, //代理三充金额
      },
    };
  },
  created () {
  },
  activated(){
    this.channelData=this.$store.state.commonState.channelDataArray
    this.getDataList();
    this.getProxyList()
  },
  methods: {
    // 代理查询
    async getDataList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.dataList = [];
      that.checkedItem = null;
      that.listLoading = true;
      if (params.dateTime && params.dateTime[0] && params.dateTime[1]) {
        params.start_time = that.$public.standardDate(params.dateTime[0])
        params.end_time = that.$public.standardDate(params.dateTime[1])
      }else{
        params.start_time = ''
        params.end_time = ''
      }
      if (params.agentTime && params.agentTime[0] && params.agentTime[1]) {
        params.agent_time_start = that.$public.standardDate(params.agentTime[0])
        params.agent_time_end = that.$public.standardDate(params.agentTime[1])
      }else{
        params.agent_time_start = ''
        params.agent_time_end = ''
      }
      const response = await getAgent(params)
      if (response.code==1) {
        if (response.data.list) {
          response.data.list.forEach(item=>{
            item.history_recharge=that.$public.mathNumberDivideWan(item.history_recharge)
            item.today_recharge=that.$public.mathNumberDivideWan(item.today_recharge)
            item.history_commission=that.$public.mathNumberDivideWan(item.history_commission)
            item.today_get_commission=that.$public.mathNumberDivideWan(item.today_get_commission)
            item.today_no_get_commission=that.$public.mathNumberDivideWan(item.today_no_get_commission)
            item.recharge_total=that.$public.mathNumberDivideWan(item.recharge_total)
            item.withdrawal_total=that.$public.mathNumberDivideWan(item.withdrawal_total)
            item.agent_total_pay_money=that.$public.mathNumberDivideWan(item.agent_total_pay_money)
            item.agent_total_cash_money=that.$public.mathNumberDivideWan(item.agent_total_cash_money)
            item.one_agent_commission=that.$public.mathNumberDivideWan(item.one_agent_commission)
            item.two_agent_commission=that.$public.mathNumberDivideWan(item.two_agent_commission)
            item.three_agent_commission=that.$public.mathNumberDivideWan(item.three_agent_commission)
            item.one_agent_water=that.$public.mathNumberDivideWan(item.one_agent_water)
            item.two_agent_water=that.$public.mathNumberDivideWan(item.two_agent_water)
            item.three_agent_water=that.$public.mathNumberDivideWan(item.three_agent_water)
          })
          that.dataList = response.data.list;
          that.currentTotal = response.data.total;
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false;
    },
    // 代理查询主页列表
    async getProxyList () {
      let that = this,params={};
      params.start_time = that.$public.getDateDay(0)+' 00:00:00'
      params.end_time = that.$public.getDateDay(0)+' 23:59:59'
      const response = await getProxy(params)
      if (response.code == 1) {
        if(response.data){
          response.data.agent_agent_recharge_money=that.$public.mathNumberDivideWan(response.data.agent_agent_recharge_money)//代理充值金额
          response.data.agent_first_recharge_money=that.$public.mathNumberDivideWan(response.data.agent_first_recharge_money) //代理首充金额
          response.data.agent_second_recharge_money=that.$public.mathNumberDivideWan(response.data.agent_second_recharge_money) //代理二充金额
          response.data.agent_three_recharge_money=that.$public.mathNumberDivideWan(response.data.agent_three_recharge_money) //代理三充金额
          that.formParams = response.data
        }
      }else{
        that.$message.error(response.msg)
      }
    },
    // 分享链接
    shareUrl(row) {
      window.open(row.share_url)
    },
    // 领取类型
    downType(cellValue){
      return (this.statusData.find((item) => item.value === cellValue)?.label || "-");
    },
    // 埋点类型展示
    pointLabel(cellValue){
      if(cellValue){
        return (this.POINT_TYPE.find((item) => item.value === cellValue)?.label || "-");
      }
    },
    // 选择表格数据
    handleCurrentChange (val,type) {
      this.checkedItem = val
      if(type=='nick_name'){
        this.isShowDetails = true
      }else{
        if(val.all_son_num!=0){
          this.isShowSubDetails = true
        }
      }
    },
    onHideDetails(show){
      this.isShowDetails=false
      this.isShowSubDetails=false
      this.isShowMobileDetails=false
      if(show){
        this.getDataList(true)
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        filter_user_type:1,
        filter_value:'',
        agent_id:'',
        dateTime: [this.$public.getDateDay(0)+' 00:00:00',this.$public.getDateDay(0)+' 23:59:59'],
        start_time: '',
        end_time: '',
        agentTime: [],
        agent_time_start: '',
        agent_time_end: '',
        is_agent: 1,
      };
      this.getDataList();
      this.getProxyList()
    }, 2000),
  },
};
</script>

<style lang="scss" scoped>
.width25{
  margin: 5px;
  border-radius: 5px;
  text-align: center;
}

.infoBox{
  color: #fff;
  font-size: 18px;
  padding:10px 20px 0px 20px;
  font-weight: 550;
  text-align: left;
  position: relative;
  // background-color: cornflowerblue;
  .numberBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .numberText{
    font-size: 24px;
    border-bottom: 1px solid #fff;
  }
}
.card-panel_one {
  background: url('../../assets/img/teen_rummy/rummy_game.png') no-repeat;
  background-size: 100% 100%;
  &:hover{
    transition: all 0.3s ease-out;
    transform: scale(0.9);
  }
}
.card-panel_two {
  background: url('../../assets/img/teen_rummy/rummy_water.png') no-repeat;
  background-size: 100% 100%;
  &:hover{
    transition: all 0.3s ease-out;
    transform: scale(0.9);
  }
}
.card-panel_three {
  background: url('../../assets/img/teen_rummy/rummy_income.png') no-repeat;
  background-size: 100% 100%;
  &:hover{
    transition: all 0.3s ease-out;
    transform: scale(0.9);
  }
}
.card-panel_four {
  background: url('../../assets/img/teen_rummy/rummy_tax.png') no-repeat;
  background-size: 100% 100%;
  &:hover{
    transition: all 0.3s ease-out;
    transform: scale(0.9);
  }
}
</style>
